<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id= "comp">
        <p>msg:{{msg}}</p>
        <input type="button" value="修改msg" @click="setMsg()">
    </div>
    <hr>
    <div id="a"></div>
    <div id="b"></div>
</body>
<script>
    // extend 基于原始Vue构造函数， 创建一个新的构造函数
    var CompA = Vue.extend();
    // console.log(CompA);

    // options 等效于 new Vue(options) 的 options
    // var vm =  new CompA(options);
    var vm = new CompA({
        el:"#comp",
        data:{
            msg:"msg变量"
        },
        methods: {
            setMsg(){
                this.msg = "重新为msg赋值";
            }
        },
    })
    console.log(vm); // VueComponent

    var obj = {
        msg:"共享数据"
    }
    // extend 接收一个固定的形参 optinos => 基本等同于 new Vue(optinos) 的 optinos
    var CompB = Vue.extend({
        // el 属性只能被用于 new 关键字的配置项中
        // 继承函数的蓝本定义时，不能使用 el 配置项
        // el:"#a",
        template:"<h1 @click='print()'>compB的页面元素解构=={{msg}}=={{info}}</h1>",
        // data:{
        //     msg:"测试数据"
        // },
        data:function(){
            return {
                msg: "测试数据"
            }
            //  return obj; 
        },
        methods:{
            print(){
                console.log("compB的方法")
            }
        }
    })
    var vm1 = new CompB({
        el:"#a",
        data:{
            info:"bbbb"
        }
    })
    console.log("vm1:",vm1.$el);
    var vm3 = new CompB();
    vm3.$mount("#b");
    console.log("vm3:",vm1.$el)
</script>
</html>